import {View, Text, Image} from "@tarojs/components";
import {Tab, Tabs} from "@antmjs/vantui";
import TextIcon from "@/components/TextIcon";
import AssetImage from "@/common/AssetImage";
import {QRCode} from "taro-code";
import {useCallback} from "react";
import './person_card.less'

definePageConfig({
  navigationBarTitleText: '个人名片',
  enableShareAppMessage: true
})
//van-tabs__nav van-tabs__nav--line nav-class
export default function PersonCard() {
  return (
    <View style={{
      height: '100vh',
      backgroundImage: 'url(https://gitee.com/andoridityu/files/raw/master/pics/person-bg.png)',
      backgroundSize: '100% 100%'
    }}>
      <View style={{margin: '20px', padding: '20px 0'}}>
        <Tabs type='line'>
          <Tab title="展示信息"><PersonCardInfo type={0}/></Tab>
          <Tab title="不展示信息"><PersonCardInfo  type={1}/></Tab>
        </Tabs>
      </View>
    </View>
  )
}


function PersonCardInfo(pros) {
  const type = pros.type;

  const getItems = useCallback(() => {
    return type == 0 ? <View style={{
      display: 'flex',
      marginTop: '10px',
      flexDirection: 'column'
    }}>
      <Text style={{fontSize: '18px', fontWeight: 'bold', paddingBottom: '10px'}}>与牛会</Text>
      <TextIcon text='18976666' iconName={'phone'} iconColor={AssetImage.themeColor} style={{paddingBottom: '10px'}}/>
      <TextIcon text='--' iconColor={AssetImage.themeColor} style={{paddingBottom: '10px'}}
                customIcon={<Image src={AssetImage.build} style={{width: '15px', height: '15px'}}/>}
      />
      <TextIcon text='北京' iconName={'location'} iconColor={AssetImage.themeColor} style={{paddingBottom: '10px'}}/>
    </View> : <View style={{
      display: 'flex',
      marginTop: '10px',
      flexDirection: 'column'
    }}>
      <Text style={{fontSize: '18px', fontWeight: 'bold', paddingBottom: '10px'}}>研城科技</Text>
      <TextIcon text='研城科技' iconName={'location'} iconColor={AssetImage.themeColor} style={{paddingBottom: '10px'}}/>
      <TextIcon text='www.baidu.com' iconColor={AssetImage.themeColor} style={{paddingBottom: '10px'}}
                customIcon={<Image src={AssetImage.www} style={{width: '15px', height: '15px'}}/>}
      />
    </View>
  }, [type]);


  return (
    <View style={{
      display: 'flex',
      marginTop: '10px',
      flexDirection: 'column',
    }}>
      <Image src={'https://gitee.com/andoridityu/files/raw/master/pics/qr-bg.png'} style={{width: '100%',height: '305px'}}/>
      <View style={{
        backgroundColor: '#fff',
        borderBottomLeftRadius: '10px',
        borderBottomRightRadius: '10px',
        display: 'flex',
        flexDirection: 'column',
        padding: '10px',
      }}>
        {
          getItems()
        }
        <View style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
          <Image src={AssetImage.logo2} style={{width: '80px', height: '30px'}}/>
          <QRCode
            text='world'
            size={50}
            showMenuByLongpress
            scale={4}
            errorCorrectLevel='M'
            typeNumber={2}
          />
        </View>
      </View>
    </View>
  )
}



